<template>
	<view class="cancel_account_box">
		<view class="tips_box">
			注销账号
			<image class="cancel_account_image" src="https://test.tianwandailian.cn/static/server/newimage/vip_center/tips_icon_bule.png" mode="aspectFill"></image>
		</view>
		<view class="describe_box">
			<view class="text_class title_text">注销账户需满足以下要求：</view>

			<view class="text_class">1、账号不得存在任何已发布或进行中的单据，包括进行中的发布/接手订单，提现订单</view>
			<view class="text_class">2、账户中不可有余额，包括冻结中余额</view>
			<view class="text_class">3、该账号不能正在申请成为商户</view>
			<view class="text_class">注销申请后，将会在三天后完成注销操作，期间再次登录账号将会取消注销申请</view>
		</view>
		<view class="btn_box">
			<view class="btn" @click="confirmCancel">确认注销</view>
		</view>
	</view>
</template>

<script setup>
	import {
		AccountCancellation,
	} from '@/api/modules/system';

	import useStore from '@/stores'

	const {
		globalStore
	} = useStore()

	// 确认注销
	const confirmCancel = () => {
		uni.$showModal({
			title: "",
			content: '继续操作，此帐号将会被注销，无法进行接发单操作，是否继续注销?',
			confirmVal: '确定',
			cancelVal: '取消'
		}).then(() => {
			AccountCancellation().then(async res => {
				await uni.$uv.toast(res.message);
				
				if (res.code === 0) {
					// 清除缓存
					await globalStore.clearLoginInfo()
					// 删除所有页 跳转登录页
					await uni.reLaunch({
						url: '/pages/login/index'
					});
				}
			})
		}).catch(() => {})
	}
</script>

<style lang="scss" scoped>
	.cancel_account_box {
		// width: 100%;
		height: 100vh;
		padding: 24rpx;
		.tips_box{
			padding: 24rpx;
			height: 100rpx;
			background: linear-gradient(135deg, #0A4DDE 0%, #5289FF 100%);
			border-radius: 24rpx;
			color: #FFFFFF;
			font-size: 48rpx;
			.cancel_account_image{
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				right: 48rpx;
				opacity: 0.5;
			}
		}

		.describe_box {
			margin-top: -32rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			.title_text{
				font-family: OPPOSans;
				font-weight: 500;
				color: #151515;
				font-weight: 600;
				line-height: 48rpx;
			}

			.text_class {
				line-height: 48rpx;
				color: #565656;
			}

			.btn {
				margin-top: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
				// margin: 92rpx auto;
				min-height: 80rpx;
				background: #6E68E9;
				border-radius: 200rpx;
			}
		}
		.btn_box {
			height: 196rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
		
			.btn {
				width: 686rpx;
				height: 80rpx;
				background: #6E68E9;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #ffffff;
				font-size: 28rpx;
				margin: 0 auto;
			}
		}
	}
</style>